<template>
  <div class="completed">
    <MyHeader />
    <div class="completed_tip">
      <p>温馨提示:</p>
      <p>公安部门与工商部门完善公章刻制即时自动备案机制，对新开办企业免费发放以下四种印章各1枚，企业登记后相关印章将随营业执照一并发放。您可根据需要选择印章种类，其中“法定名称章”必选。与各区政务服务中心（大厅）达成服务意向的刻章企业将为您提供公章刻制服务，名单见下栏。</p>
      <div class="completed_badge">
        <div>
          <div>
            <MyCheckBox disabled v-model="sealForm.nameseal" /> 法定名称章
          </div>
          <div>
            <MyCheckBox v-model="sealForm.financeseal" /> 财务专用章
          </div>
        </div>
        <div>
          <div>
            <MyCheckBox v-model="sealForm.invoiceseal" /> 合同专用章
          </div>
          <div>
            <MyCheckBox v-model="sealForm.contractseal" /> 发票专用章
          </div>
        </div>
        <!-- <div>
        <div>
            <MyCheckBox v-model="sealForm.declareseal" /> 报关专用章
          </div>
        </div> -->
      </div>
    </div>
    <div class="completed_space"></div>
    <div class="completed_company">
        <Input v-model="queryForm.address" :placeholder="'请输入刻章企业地址或者企业名称关键字进行搜索'">
          <Button slot="append" icon="ios-search" @click="queryFactory"></Button>
        </Input>
        <RadioGroup v-model="isCheck" @on-change='seleBus' size="large">
            <div class="busCard" v-for="(item,index) in businessList" :key="index" style="background:#eee">
              <Radio  :label="index">
              <Card :bordered="false">
                  <p slot="title">{{item.name}}</p>
                  <p>地址：{{item.address}}</p>
                  <p>联系方式：{{item.tel}}</p>
              </Card>
              </Radio>
             </div>
        </RadioGroup>
      <!-- </div> -->
      <div style="clear:both;margin:.1rem 0"></div>
        <Page :total="total" :page-size='3' simple @on-change='changePage'></Page>
    </div>
    <div class="completed_btn">
      <Button type="primary" @click="saveSealForm">完成</Button>
      <MyFooter />
    </div>
  </div>
</template>
<script>
  import MyHeader from '../../components/MyHeader.vue'
  import MyCheckBox from '../../components/MyCheckBox.vue'
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  export default {
    data() {
      return {
        queryForm: {
          page: '1',
          pageRows: '3',
          address: ''
        },
        sealForm: {
          nameseal: true,
          financeseal: false,
          invoiceseal: false,
          contractseal: false,
          declareseal: false
        },
        isBus: {
          factoryid: '',
          factorycode: '',
          name: '',
          address: '',
          tel: ''
        },
        businessList: [],
        total: 0,
        isCheck: '',
        address: '',
        loading1: false,
        options1: [],
        list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
          'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
          'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
          'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina',
          'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina',
          'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia',
          'Wisconsin', 'Wyoming'
        ]
      }
    },
    methods: {
      remoteMethod1(query) {
        if (query !== '') {
          this.loading1 = true
          setTimeout(() => {
            this.loading1 = false
            const list = this.list.map(item => {
              return {
                value: item,
                label: item
              }
            })
            this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
          }, 200)
        } else {
          this.options1 = []
        }
      },
      querySealForm() {
        request.get('/interface/apply/cp/setup/querySealForm.do', {gid: sessionStorage.getItem('gid')}
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result) {
            this.sealForm = response.data.data.sealForm
            this.sealForm.nameseal = true
            this.sealForm.financeseal = (this.sealForm.financeseal === 1)
            this.sealForm.invoiceseal = (this.sealForm.invoiceseal === 1)
            this.sealForm.contractseal = (this.sealForm.contractseal === 1)
            this.sealForm.declareseal = (this.sealForm.declareseal === 1)
            this.queryFactory()
          }
        })
      },
      queryFactory() {
        this.queryForm.regorg = localStorage.getItem('regorg') + '000'
        this.businessList = []
        if (this.queryForm.page === '1' && this.sealForm.factoryid) {
          var frist = {}
          frist.factoryid = this.sealForm.factoryid
          frist.factorycode = this.sealForm.factorycode
          frist.name = this.sealForm.name
          frist.address = this.sealForm.address
          frist.tel = this.sealForm.tel
          this.queryForm.pageRows = '2'
        } else {
          this.queryForm.pageRows = '3'
        }
        this.queryForm.factoryid = this.sealForm.factoryid
        if (this.queryForm.address) {
          this.queryForm.page = 1
          this.queryForm.pageRows = 3
        }
        let postData = new FormData()
        postData.append('queryForm', JSON.stringify(this.queryForm))
        request.post('/interface/apply/cp/setup/queryFactory.do', postData
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          } else if (response.data.result === 'success') {
            this.businessList = response.data.data.list
            if (this.queryForm.page === '1' && this.sealForm.factoryid) {
             this.businessList.unshift(frist)
             this.isCheck = 0
             this.seleBus(0)
            } else {
              this.isCheck = ''
            }
            this.total = response.data.data.num * 1
          }
        })
      },
      changePage(val) {
        this.queryForm.page = val
        this.queryFactory()
      },
      seleBus(val) {
        this.isBus.factoryid = this.businessList[val].factoryid
        this.isBus.factorycode = this.businessList[val].factorycode
        this.isBus.name = this.businessList[val].name
        this.isBus.address = this.businessList[val].address
        this.isBus.tel = this.businessList[val].tel
      },
      saveSealForm() {
        if (!this.isBus.factoryid) {
          this.$ErrorAlert('请选择刻章企业')
          return null
        }
        this.sealForm.nameseal = this.sealForm.nameseal ? '1' : '2'
        this.sealForm.financeseal = this.sealForm.financeseal ? '1' : '2'
        this.sealForm.invoiceseal = this.sealForm.invoiceseal ? '1' : '2'
        this.sealForm.contractseal = this.sealForm.contractseal ? '1' : '2'
        this.sealForm.declareseal = this.sealForm.declareseal ? '1' : '2'
        this.sealForm.factoryid = this.isBus.factoryid
        this.sealForm.factorycode = this.isBus.factorycodess
        this.sealForm.gid = sessionStorage.getItem('gid')
        let postData = new FormData()
        postData.append('sealForm', JSON.stringify(this.sealForm))
        request.post('/interface/apply/cp/setup/saveSealForm.do', postData
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          this.$router.push({ name: 'ApplyModule' })
        })
      }
    },
    mounted() {
      this.querySealForm()
    },
    components: {
      MyHeader,
      MyCheckBox,
      MyFooter
    }
  }

</script>
<style lang="scss">
  .completed {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    &_tip {
      padding: 0 0.54rem 0.36rem;
      >p {
        font-size: 0.5rem;
        margin: 0.36rem 0;
        &:first-child {
          font-size: 0.57rem;
          margin: 0.54rem 0;
        }
        &:nth-child(2) {
          text-indent: 1.14rem;
        }
      }
    }
    &_badge {
      display: flex;
      flex-direction: column;
      >div {
        display: flex;
        justify-content: space-around;
        >div {
          display: flex;
          align-items: center;
          position: relative;
          line-height: 1.25rem;
          input {
            left: -1rem;
            height: 100%;
          }
        }
      }
    }
    &_space {
      height: 0.54rem;
      background: #f3f3f3;
    }
    &_company {
      padding: 0.54rem;
      font-size: 0.5rem;
      &-items {
        >div {
          display: flex;
          padding: 0.36rem 0 0.36rem 1.14rem;
          position: relative;
          align-items: center;
          border-bottom: 1px solid #ccc;
          input {
            top: 50%;
            transform: translate3d(-130%, -50%, 0);
          }
        }
      }
      &-page {
        padding: 0.36rem 0 0;
        height: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        button {
          margin: 0 0.18rem;
          color: #00b3ff;
          background: #fff;
        }
      }
    }
    &_btn {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3.5rem;
      button {
        display: block;
        margin: 0 auto;
        padding: 0.28rem 1.44rem;
        font-size: 0.57rem;
      }
    }
    .busCard{
      width: 100%;
      overflow: hidden;
      padding: .2rem;
      .ivu-card{
        margin-left: .7rem;
      }
      .ivu-radio{
        display: block;
        float: left;
        width: .5rem;
        height: .5rem;
        margin-top: 3rem
      }
      .ivu-radio-wrapper{
        display: block;
        float: left;
        white-space: normal;
        margin: 0;
      }
    }
  }

</style>
